@import "mixin_helpers";
@import "variables";

.sidebar-background {
  position: fixed;
  z-index: -1;
  width: $primary-sidebar-width;
  background: $header-gradient-bottom;
  top: 0;
  left: 0;
  height: 100%;
  border-right: 1px solid #ccc;

  .primary-sidebar-background {
    width: $primary-sidebar-width;
    background: #11161A;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
  }
}


.primary-sidebar {
  width: $primary-sidebar-width;
  float: left;
  position: absolute;

  .nav {

    margin-bottom: 20px;

    &:after {
      content: "";
      position: absolute;
      bottom: -1px;
      height: 1px;
      width: 100%;
      left: 0;
      @include background(linear-gradient(left, transparent 0%, rgba(32, 41, 47, 0.8) 35%, rgba(32, 41, 47, 1) 50%, rgba(32, 41, 47, 0.8) 65%, transparent 100%));
    }

    > li {

      position: relative;
      border-bottom: 1px solid transparent;

      a:after {
        content: "";
        position: absolute;
        bottom: -1px;
        height: 1px;
        width: 100%;
        left: 0;
        @include background(linear-gradient(left, transparent 0%, rgba(10, 13, 14, 0.8) 30%, rgba(10, 13, 14, 1) 50%, rgba(10, 13, 14, 0.8) 70%, transparent 100%));
      }

      a:before {
        content: "";
        position: absolute;
        top: 0px;
        height: 1px;
        width: 100%;
        left: 0;
        @include background(linear-gradient(left, transparent 0%, rgba(32, 41, 47, 0.8) 35%, rgba(32, 41, 47, 1) 50%, rgba(32, 41, 47, 0.8) 65%, transparent 100%));
      }

      .glow {
        position: absolute;
        height: 100%;
        width: 5px;
        @include transition(box-shadow .3s);

        background: #1F2B42;
        @include box-shadow(0 0 2px 1px #434D59 inset);
      }

      &:hover {
        .glow {
          background: #4291A6;
          @include box-shadow(0 0 2px 1px #7BC8D7 inset);
        }

        > a {
          color: lighten(#6B787F, 15);
        }
      }

      &.active {
        .glow {

          background: #4291A6;
          @include box-shadow(0 0 2px 1px #7BC8D7 inset);

          &:after {
            content: "";
            border-radius: 50%;
            position: absolute;
            top: 20px;
            width: 0;
            height: 0;
            left: 8px;
            @include box-shadow(-10px 0 15px 23px rgba(122, 171, 216, 0.15));
            background: rgba(124, 190, 215, 0.2);
          }
        }

        > a {
          @include text-shadow(0 1px 0 rgba(0,0,0,.5));
          color: lighten(#6B787F, 15);
        }
      }

      > a {

        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 25px;

        @include transition(color .3s);

        &:hover, &:focus {
          background: #11161A;
        }

        span {
          font-size: 12px;
          vertical-align: middle;
        }

        i {
          vertical-align: middle;
        }

        i + span {
          padding-left: 10px;
        }

        @include text-shadow(0 1px 0 rgba(0,0,0,.5));
        color: #6B787F;
      }
    }
  }
}

.user-avatar {

  .dropdown-toggle {
    span {
      font-weight: 600;
    }
  }

  width: 100%;
  position: relative;

  a {
    display: inline-block;

    > span {
      position: relative;
    }

    img {
      @include box-shadow(0 1px 3px #1e1e1e);
      @include border-radius(2px);
    }

    .badge {
      z-index: 2;
      position: absolute;
      left: -6px;
      top: -10px;
    }
  }

  .dropdown-menu {
    margin-top: 4px;
  }
}

.status-error {
  color: darken(#db6464,10);
}

.status-success {
  color: darken(#96c877,20);
}

.status-pending {
  color: #888;
}

.status-warning {
  color: #E36D2D;
}

.status-info {
  color: #4C9ECD;
}

//the divider bar
hr.divider, li.divider {
  border: 0;
  height: 1px;
  @include background(linear-gradient(left, rgba(205, 205, 205, 0), rgba(205, 205, 205, 1), rgba(205, 205, 205, 0)));
  position: relative;

  &:after {
    content: '';
    height: 1px;
    top: 1px;
    left: 0;
    width: 100%;
    position: absolute;
    @include background(linear-gradient(left, rgba(250,250,250,0), rgba(250,250,250,1), rgba(250,250,250,0)));
  }

  + .padded, + .vpadded {
    padding-top: 0;
  }
}

//different colors and margin for the dividers that sit on the sidebar
.primary-sidebar .divider {
  &:after { content: none; }
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #0a0d0e;
  @include background(linear-gradient(left, transparent 0%, rgba(32, 41, 47, 0.8) 25%, rgba(32, 41, 47, 1) 50%, rgba(32, 41, 47, 0.8) 75%, transparent 100%));
}

.area-top {
  @include std-bg(#fafafa, #ececec);
  @include box-shadow(0 2px 1px -1px rgba(0,0,0,.07));
  border-bottom: 1px solid #ccc;
  position: relative;
  width: 100%;
  padding: 10px 15px;
  @include box-sizing(border-box);
  margin-bottom: 15px;

  .header {

    font-size: 14px;

    i {
      float: left;
      font-size: 24px;
      margin-top: 4px;
      margin-right: 10px;
    }

    h3, h5 {
      margin: 0;
      font-weight: 300;
    }

    h3, i {
      color: #888;
    }
    
    h3 {
      line-height: 35px;
    }

    h5 {
      color: #aaa;
    }

    > * {
      vertical-align: middle;
      text-shadow: 0 1px #fff;
    }

  }
}

